<template>
  <h3>组件式API生命周期钩子函数</h3>
  <p>数据值:{{num}}</p>
  <button @click="num++">更新数字</button>
</template>

<script>
import { ref, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue';
export default {
  name: 'Faa',
  setup() {
    console.log('setup函数中代码执行了');
    let num = ref(10);
    // 没有onBeforeCreated onCreated 被 setup完全代替
    onBeforeMount(() => {
      console.log('onBeforeMount执行了');
    });
    onMounted(() => {
      console.log('onMounted执行了');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate执行了');
    });
    onUpdated(() => {
      console.log('onUpdated执行了');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount执行了');
    });
    onUnmounted(() => {
      console.log('onUnmounted执行了');
    });
    return {
      num
    };
  },
  beforeCreate() {
    console.log('beforeCreate钩子函数执行了');
  },
  created() {
    console.log('created钩子函数执行了');
  },
  beforeMount() {
    console.log('beforeMount钩子函数执行了');
  },
  mounted() {
    console.log('mounted钩子函数执行了');
  },
  beforeUpdate() {
    console.log('beforeUpdate钩子函数执行了');
  },
  updated() {
    console.log('updated钩子函数执行了');
  }
};
</script>

<style>
</style>